<script setup>
import ContentHeader from './components/ContentHeader.vue'
import ContentMain from './components/ContentMain.vue'
import SettingBootstrap from './components/components_bootstrap/SettingBootstrap.vue'
import ContentBorder from './components/ContentBorder.vue'
import FinalBootstrap from './components/components_bootstrap/FinalBootstrap.vue'
import CountDown321 from './components/components_bootstrap/CountDown321.vue'
import SpeedBootstrap from './components/components_bootstrap/SpeedBootstrap.vue'
import { SettingOutlined } from '@ant-design/icons-vue'
import { onMounted, ref, watch } from 'vue'
import { boardOpenOrCloseStore, gameStateStore, settingStore } from '@/stores'
import ReGame from './components/components_bootstrap/ReGame.vue'
const settingStore1 = settingStore()
const boardOpenOrCloseStore1 = boardOpenOrCloseStore()
const gameStateStore1 = gameStateStore()
const toggleSound = () => {
  let music = document.querySelector('.aud_background')
  if (music.paused) {
    console.log('音乐开始')
    music.play().catch((e) => {
      console.error('播放失败:', e)
      // 提示用户点击页面以启用音频
    })
  } else {
    console.log('音乐暂停')
    music.pause() // 暂停
  }
}
const setting = ref(null)
onMounted(() => {})
const viewSetPage = ref(false)
const handleClickSettingFn = () => {
  viewSetPage.value = true
}
watch(
  () => setting.value?.state?.checked1,
  (newV) => {
    if (newV !== undefined) {
      if (newV !== settingStore1.hasMusic) {
        settingStore1.changeHasMusic(newV)
        toggleSound()
      }
    }
  },
)
const handleCloseBoard = (value) => {
  viewSetPage.value = value.isClose
}
</script>

<template>
  <div class="attack-mouse">
    <!-- 浏览器可能只允许交互后才能播放音乐，所以我一开始无法触发 -->
    <audio class="aud_background" loop="loop">
      <source src="./../assets/background_audio.mp3" type="audio/mpeg" />
    </audio>
    <SettingBootstrap
      v-show="viewSetPage"
      ref="setting"
      @closeBoard="handleCloseBoard"
    ></SettingBootstrap>
    <FinalBootstrap v-if="boardOpenOrCloseStore1.finalBoard"></FinalBootstrap>
    <CountDown321 v-if="boardOpenOrCloseStore1.countDownBoard"></CountDown321>
    <SpeedBootstrap v-if="boardOpenOrCloseStore1.speedBoard"></SpeedBootstrap>
    <ReGame v-if="boardOpenOrCloseStore1.reGame"></ReGame>
    <div
      class="audio-setting"
      v-if="!gameStateStore1.stopMusicModelChange"
      @click="handleClickSettingFn"
    >
      <SettingOutlined
        style="
          font-size: 20px;
          background-color: #f49c5f;
          padding: 10px;
          border-radius: 5px;
          cursor: pointer;
        "
      />
    </div>
    <div class="content-box">
      <ContentHeader></ContentHeader>
      <ContentMain></ContentMain>
      <ContentBorder></ContentBorder>
    </div>
  </div>
</template>
<style lang="less" scoped>
.attack-mouse {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/background_img.jpg') no-repeat center center;
  background-size: 80% 100%;
  background-color: #93f493;
  // audio {
  // display: none;
  //}
  .audio-setting {
    position: absolute;
    left: 0;
    top: 0;
    &:hover {
      color: rgb(236, 234, 234);
    }
  }
  .content-box {
  }
}
</style>
